import React from 'react';
import PropTypes from 'prop-types';
import {Button, Form, Row, Col, Card, Spin, Collapse} from 'antd';
import {FORM_OPTIONS} from '../constants';
import MultipleSelect from './MultipleSelect';
import TextArea from 'Shared/components/TextArea';
import {marketSelect, isYorN} from '../Enum';
import {isDestruction} from './constants';
import WrappedSelect from '../common/WrappedSelect';
import DateRangePicker from 'Shared/components/DateRangePicker';
import {injectIntl, language} from './intl';
import styles from './style.css';

const isYorNList = isYorN.toList(language);
const isDestructionList = isDestruction.toList(language);
class QueryPanel extends React.PureComponent {
    state = {
        marketSelect: 1,
        data: {},
    }
    handleFilterChange = (value, name) => {
        this.props.onConditionsChange(name, value);
    }

    handleMarketSelect = value => {
        this.setState({marketSelect: value});
        this.props.onConditionsChange('regions', []);
        this.props.onConditionsChange('dealerCodes', []);
    }
    handleFilterPressEnter = (value, name) => {
        this.props.onConditionsChange(name, value);
        this.props.querySearch();
    }
    onClickStopPropagation = e => {
        e.stopPropagation();
    }
    render() {
        const {...rest} = this.state;
        const {formatMessage} = this.props.intl;
        const {categories} = this.props;
        const condition = this.props.conditions || {};
        return (
            <div className={styles.collapse}>
                <Spin spinning={this.props.loading}>
                    <Card>
                        <Collapse>
                            <Collapse.Panel key="1" disabled={true} header={<Row>
                                <Col span={2} className={styles.titleName}>
                                    {formatMessage({
                                        id: 'queryPanel.form.marketInfo',
                                        defaultMessage: '市场信息'
                                    })}
                                </Col>
                                <Col span={22}>
                                    <Row>
                                        <Form className="form-standard">
                                            <Col {...FORM_OPTIONS.col}>
                                                <Form.Item
                                                    label={formatMessage({
                                                        id: 'queryPanel.form.marketSelect',
                                                        defaultMessage: '市场选择'
                                                    })}
                                                    {...FORM_OPTIONS.item}>
                                                    <div onClick={this.onClickStopPropagation}><WrappedSelect
                                                        name="marketSelect"
                                                        value={rest.marketSelect}
                                                        options={marketSelect.toList(language)}
                                                        onChange={this.handleMarketSelect} /></div>
                                                </Form.Item>
                                            </Col>
                                            {rest.marketSelect === 2 &&
                                        <Col {...FORM_OPTIONS.col}>
                                            <Form.Item
                                                label={formatMessage({
                                                    id: 'queryPanel.form.marketDepartmentId',
                                                    defaultMessage: '区域'
                                                })}
                                                {...FORM_OPTIONS.item}>
                                                <div onClick={this.onClickStopPropagation}><MultipleSelect
                                                    name="regionCode"
                                                    placeholder={formatMessage({
                                                        id: 'queryPanel.form.regionCode.placeholder',
                                                        defaultMessage: '最多选择1000个大区名称，以回车隔开'
                                                    })}
                                                    dataOptions={categories}
                                                    value={condition.regionCodes}
                                                    onBlur={this.handleFilterChange} /></div>
                                            </Form.Item>
                                        </Col>}
                                            {rest.marketSelect === 3 &&
                                        <Col {...FORM_OPTIONS.col}>
                                            <Form.Item
                                                label={formatMessage({
                                                    id: 'queryPanel.form.dealerId',
                                                    defaultMessage: '总代'
                                                })}
                                                {...FORM_OPTIONS.item}>
                                                <div onClick={this.onClickStopPropagation}><TextArea
                                                    name="dealerCode"
                                                    placeholder={formatMessage({
                                                        id: 'queryPanel.form.dealerCode.placeholder',
                                                        defaultMessage: '最多输入1000个总代名称，以回车隔开'
                                                    })}
                                                    value={condition.dealerCodes}
                                                    onBlur={this.handleFilterChange} /></div>
                                            </Form.Item>
                                        </Col>}
                                        </Form>
                                    </Row>
                                </Col>
                            </Row>} />
                            <Collapse.Panel key="1" disabled={true} header={<Row>
                                <Col span={2} className={styles.titleName}>
                                    {formatMessage({
                                        id: 'queryPanel.form.basicsInfo',
                                        defaultMessage: '基础信息'
                                    })}
                                </Col>
                                <Col span={22}>
                                    <Row>
                                        <Form className="form-standard">
                                            <Col {...FORM_OPTIONS.col}>
                                                <Form.Item
                                                    label={formatMessage({
                                                        id: 'queryPanel.form.submitTime',
                                                        defaultMessage: '提交时间'
                                                    })}
                                                    {...FORM_OPTIONS.item}>
                                                    <div onClick={this.onClickStopPropagation}>
                                                        <DateRangePicker name="submitTime" value={condition.submitTime}
                                                            onChange={this.handleFilterChange} /></div>
                                                </Form.Item>
                                            </Col>
                                            <Col {...FORM_OPTIONS.col}>
                                                <Form.Item
                                                    label={formatMessage({
                                                        id: 'queryPanel.form.isOverdue',
                                                        defaultMessage: '是否逾期'
                                                    })}
                                                    {...FORM_OPTIONS.item}>
                                                    <div onClick={this.onClickStopPropagation}><WrappedSelect
                                                        name="isOverdue"
                                                        value={condition.isOverdue}
                                                        options={isYorNList}
                                                        onChange={this.handleFilterChange} /></div>
                                                </Form.Item>
                                            </Col><Col {...FORM_OPTIONS.col}>
                                                <Form.Item
                                                    label={formatMessage({
                                                        id: 'queryPanel.form.status',
                                                        defaultMessage: '销毁状态'
                                                    })}
                                                    {...FORM_OPTIONS.item}>
                                                    <div onClick={this.onClickStopPropagation}><WrappedSelect
                                                        name="status"
                                                        value={condition.status}
                                                        options={isDestructionList}
                                                        onChange={this.handleFilterChange} /></div>
                                                </Form.Item>
                                            </Col>
                                        </Form>
                                    </Row>
                                </Col>
                            </Row>} />
                        </Collapse>
                        <Form className={styles.fromtop}>
                            <Row>
                                <Col span={6}>
                                    <Button key="query" type="primary" onClick={this.props.querySearch} loading={this.props.loading}>{formatMessage({
                                        id: 'queryPanel.btn.query',
                                        defaultMessage: '查询'
                                    })}</Button>
                                    <Button key="clear" onClick={this.props.onResetClick}>{formatMessage({
                                        id: 'queryPanel.btn.reset',
                                        defaultMessage: '重置'
                                    })}</Button>
                                </Col>
                            </Row>
                        </Form>
                    </Card>
                </Spin>
            </div>
        );
    }
}

QueryPanel.propTypes = {
    conditions: PropTypes.object.isRequired,
    loading: PropTypes.bool.isRequired,
    querySearch: PropTypes.func.isRequired,
    onConditionsChange: PropTypes.func.isRequired,
    onResetClick: PropTypes.func.isRequired,
    intl: PropTypes.object,
};

import {connect} from 'react-redux';
import {saveQueryCondition, querySearch, resetQueryPanel} from './actions';
import selectorFactory from 'Shared/utils/immutableToJsSelectorFactory';
import {createSelector} from 'reselect';
const getCategoryData = createSelector(
    state => state.getIn(['page', 'domainData', 'category']),
    init => {
        const initData = init.toJS();
        const categories = initData.data ? initData.data.map(item => ({
            code: item.code,
            name: item.name
        })) : [];
        return categories;
    }
);

const getConditions = selectorFactory(['page', 'appState', 'queryCondition']);
const getQueryDealer = selectorFactory(['page', 'appState', 'queryDealer']);
const mapStateToProps = state => ({
    conditions: getConditions(state),
    categories: getCategoryData(state),
    loading: state.getIn(['page', 'domainData', 'list', 'isFetching']),
    queryDealer: getQueryDealer(state),
});

const mapDispatchToProps = dispatch => ({
    onConditionsChange: (name, value) => dispatch(saveQueryCondition(name, value)),
    querySearch: () => dispatch(querySearch()),
    onResetClick: () => dispatch(resetQueryPanel()),
});

export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(QueryPanel));
